<template>
  <div class="v-card">
    <van-image
      :src="baseUrl + thumb"
      :height="70"
      :width="70"
      class="v-card__image"
      style="flex: 0.23"
    />
    <div class="v-card__content">
      <div class="justify-between">
        <div class="title">{{ title }}</div>
        <van-icon name="eye" :size="20" color="#969799" @click.self="handleShow"/>
      </div>
      <div class="desc">
        <div class="desc-line">
          <van-rate
            v-model="rate"
            readonly
            allow-half
            :gutter="2"
            color="#ffd21e"
            :size="12"
            style="margin-right: 5px"
          />
          <span>{{ rate }}</span>
          <span>{{ "月售" + sale + "单" }}</span>
        </div>
        <div class="desc-line">
          <van-tag size="mini" type="primary" text-color="white">{{
            mode.text
          }}</van-tag>
        </div>
      </div>
      <div class="desc">
        <div class="desc-line">
          <span>{{ "￥" + price + "起送" }}</span>
          <span class="gary">|</span>
          <span>{{ delivery }}</span>
        </div>
        <div class="desc-line">
          <span class="gary">{{ distance }}</span>
          <span class="gary_light">|</span>
          <span class="gary">{{ arriveTime }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="v-card__active">
    <div style="flex: 0.23"></div>
    <div style="flex: 1; margin-left: 10px" class="van-hairline--top van-multi-ellipsis--l2">
      <template v-for="(item, index) of supports" :key="index">
        <div class="active-line">
          <van-tag :color="icon_colors[index]" size="mini" text-color="white" class="active-line__chip">{{
            item.icon_name
          }}</van-tag>
          <span>{{ item.description }}</span>
        </div>
      </template>
    </div>
  </div>
  <div class="van-hairline--bottom"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    title: String,
    thumb: String,
    rate: Number,
    desc: String,
    delivery: {
      type: String,
      default: "免配送费",
    },
    mode: Object,
    sale: Number,
    distance: String,
    arriveTime: String,
    address: String,
    supports: Array,
    price: Number,
  },
  setup() {
    return {
      baseUrl: "https://elm.cangdu.org/img/",
      icon_colors:['#ee0a24','#07c160','#1989fa']
    };
  },
});
</script>

<style lang="scss" scoped>
.v-card {
  display: flex;
  -webkit-box-pack: start;
  -webkit-box-align: stretch;
  align-items: stretch;
  box-sizing: border-box;
  padding: 4vw 2vw;
  background-color: #fff;
  &__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 2.6vw;
    .title {
      color: #333;
      font-size: 14.5px;
      font-weight: 700;
    }
    .desc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-line {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        span {
          color: #646566;
          font-size: 11px;
          margin-right: 5px;
          &.gary {
            color: #969799;
          }
          &.gary_light {
            color: #c8c9cc;
          }
        }
      }
    }
  }
}
.v-card__active {
  display: flex;
  padding: 0 2vw 2vw;
  background: #fff;
  .active-line {
    line-height: 1.6;
    &__chip {
      padding: 0 1px !important;
      color: #fff;
    }
    span {
      font-size: 11px;
      margin-left: 5px;
      color: #646566;
    }
  }
}
</style>
